<template>
  <!-- 部门用车申请 -->
  <div class="department">
    <div>
      <PublicTop :index="3" />
    </div>
    <div ref="ma" class="lin"></div>
  </div>
</template>

<script>
import PublicTop from "./../publicTop/index.vue";
import { getGetCarApplyDeptRank } from "@/api/dataV/index";
import * as echarts from "echarts";
export default {
  name: "DepartmentView",
  components: { PublicTop },
  data() {
    return {
      myChart: null,
      option: {
        grid: {
          left: "3%",
          right: "10%",
          bottom: "3%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          name: "个",
          type: "value",
          axisLabel: {
            show: true, // 是否显示刻度标签，默认显示
            color: "#fff",
            lineStyle: {
              type: "dashed", // 设置为虚线
            },
            formatter: "{value}", // 刻度标签的内容格式器
          },

          splitLine: {
            lineStyle: {
              type: "dashed", // 设置为虚线
            },
          },
          nameTextStyle: {
            color: "#fff",
          },
        },
        yAxis: {
          type: "category",
          axisLabel: {
            show: true, // 是否显示刻度标签，默认显示
            color: "#fff",
            fontSize: 12,
            formatter: "{value}", // 刻度标签的内容格式器
          },
          axisLine: {
            lineStyle: {},
          },
          data: [],
        },
        series: [
          {
            data: [],
            type: "bar",
            barWidth: 13,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(255, 255, 255, 0.1)",
            },
            itemStyle: {
              normal: {
                //柱体的颜色
                //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, // x1, y1, x2, y2 定义渐变方向
                  [
                    { offset: 0, color: "#74f0ff" },
                    { offset: 0.5, color: "#50E3C2" },
                    { offset: 1, color: "#2681FF" },
                  ]
                ),
              },
            },

            labelLine: {
              lineStyle: {
                width: 10,
              },
            },
          },
        ],
      },
    };
  },
  mounted() {
    window.addEventListener("resize", this.resizeView);
    this.myChart = echarts.init(this.$refs.ma);
    getGetCarApplyDeptRank().then((res) => {
      let data = [];
      let yAxis = [];
      res.map((v) => {
        data.push(v.y);
        yAxis.push(v.x);
      });
      this.option.yAxis.data = yAxis.reverse();
      this.option.series[0].data = data.reverse();
      this.myChart.setOption(this.option);
    });
  },
  methods: {
    resizeView() {
      setTimeout(() => this.myChart.resize(), 500);
    },
  },
};
</script>

<style lang="scss" scoped>
.department {
  height: 100%;
  background: url(@/assets/datav/itembg.png) no-repeat;
  .lin {
    width: 100%;
    height: 2.6rem;
  }
}
</style>
